<template>
    <view>
        <!-- component/image-loader/image-loader.wxml -->

        <image v-if="!finishLoadFlag" :mode="mode" :src="defaultImage" :style="(width ? 'width:' + width : '') + ';' + (height ? 'height:' + height : '')" />
        <image
            :mode="mode"
            :class="finishLoadFlag ? '' : 'before-load'"
            :src="originalImage"
            @load="finishLoad"
            :style="(finishLoadFlag && width ? 'width:' + width : '') + ';' + (finishLoadFlag && height ? 'height:' + height : '')"
        />
    </view>
</template>

<script>
// component/image-loader/image-loader.js
export default {
    data() {
        return {
            finishLoadFlag: false
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        //默认图片
        defaultImage: String,
        //原始图片
        originalImage: String,
        width: String,
        height: String,
        //图片剪裁mode，同Image组件的mode
        mode: String
    },
    /**
     * 组件的方法列表
     */
    methods: {
        finishLoad: function (e) {
            this.setData({
                finishLoadFlag: true
            });
        }
    },
    created: function () {}
};
</script>
<style>
/* component/image-loader/image-loader.wxss */

.before-load {
    width: 0;
    height: 0;
    opacity: 0;
}

/* .before-load {
  width: 0;
  height: 0;
  opacity: 0;
} */
</style>
